<template>
  <div class="wx-bind-phone">
    <div class="wx-phone">
      <div class="phone-box">
        <span class="title">手机号</span>
        <div class="phone-con">
          <input type="text" class="phone-num" placeholder="请输入登录手机号" maxlength="11" v-model="phone"/>
        </div>
      </div>
    </div>

    <div class="verify-box">
      <div class="verify-con">
        <span class="verify-title">验证码</span>
        <div class="code-con">
          <div class="code-box">
            <input class="code" type="number" oninput="if(value.length>6)value=value.slice(0,6)" placeholder="请输入验证码"
                   v-model="code"/>
          </div>
          <timer-btn ref="timerBtn" class="mobile" v-on:run="sendCode"></timer-btn>
        </div>
      </div>
    </div>

    <div class="wx-phone">
      <div class="phone-box">
        <span class="title">新密码</span>
        <div class="phone-con">
          <input type="text" class="phone-num" placeholder="请设置6-16位密码" maxlength="16" v-model="pwd1"/>
        </div>
      </div>
    </div>
    <div class="wx-phone">
      <div class="phone-box">
        <span class="title">确认密码</span>
        <div class="phone-con phone-dist">
          <input type="text" class="phone-num" placeholder="请再次输入新密码" maxlength="16" v-model="pwd2" @blur="inputBlur"/>
        </div>
      </div>
    </div>

    <div class="wx-tip">
      温馨提示：若您绑定的手机号是已在蓝聘平台上注册过的手机号，则您之前手机登录的密码会更新成本次绑定设置的密码。
    </div>

    <button class="sure-text" type="button" @click="bindCustomerPhone">登&nbsp;&nbsp;录</button>

    <div class="protocol-box">
      <span>点击注册即表示同意</span><span class="protocol" @click="protocolPage">《用户注册协议》</span>
    </div>

  </div>
</template>

<script>
  import code from "../../components/code"
  import {checkCode, checkPhone, checkPwd} from "../../config/verify";
  import {getToken, mateCode, sendCode, wxSetPhone} from "../../axios/api";
  import {getSessionStore, getStore, getUrlKey, setSessionStore, setStore} from "../../config/util";
  import Cookies from 'js-cookie';
  import md5 from 'js-md5';

  export default {
    data() {
      return {
        phone: "",
        token1: "",
        token2: "",
        code: "",
        pwd1: "",
        pwd2: "",
        openId: getUrlKey("id"),
        wxOpenId: getUrlKey("wxOpenId"),
        identity: "",
        withdraw: ""
      }
    },
    mounted() {
      let base64 = require('js-base64').Base64;
      this.withdraw = base64.decode(getStore("withdraw_sign")); //判断不同的用户
    },
    methods: {
      sendCode() {//获取验证码
        let phone = this.phone;
        if (checkPhone(phone)) {
          let param1 = {
            "phone": phone,
            "i": 6
          };
          this.$refs.timerBtn.setDisabled(true);
          getToken(param1).then((res) => {//获取token
            this.token1 = res.data;

            let param2 = {
              "phone": phone,
              "i": 6,
              "userToken": this.token1
            };
            sendCode(param2).then((res) => {//发送验证码
              if (res.code == 0) {
                this.token2 = res.data;
                this.$refs.timerBtn.setDisabled(true);//设置按钮不可用
                this.$refs.timerBtn.start(); //启动倒计时
              } else {
                this.$refs.timerBtn.stop();
                this.$vux.toast.text(res.msg, "middle");
              }
            });
          });
        }
      },
      affirmPwd() {
        let pwd1 = this.pwd1;
        let pwd2 = this.pwd2;
        if (pwd1 != pwd2) {
          this.$vux.toast.text("两次密码不一致", "middle");
          return;
        }
        return true;
      },
      bindCustomerPhone() {//绑定微信客户手机号
        let phone = this.phone;
        let pwd = this.pwd1;
        let code = this.code;
        if (checkPhone(phone) && checkCode(code) && checkPwd(pwd, 2) && this.affirmPwd()) {
          this.$vux.loading.show({
            text: '加载中',
          });

          let param1 = {
            "phone": phone,
            "i": 6,
            "code": code,
            "token": this.token2,
          };
          mateCode(param1).then((res) => {//校验验证码
            this.$vux.loading.hide();
            if (res.code == 0) {
              let param2 = {
                "sgin": this.openId,
                "userName": "0fc23ce3bc0e1ee5e5e",
                "type": 0,
                "phone": phone,
                "password": md5(pwd),
                "upIdentity": this.identity,
                "wxOpenId": this.wxOpenId
              };

              wxSetPhone(param2).then((res) => {//wx绑定手机号
                if (res.code == 0) {
                  if (res.data == "null") {
                    this.$vux.toast.text("注册用户失败,请重试", "middle");
                  } else {
                    let userArray = res.data.split("#");
                    this.initWxLogin(userArray[0], userArray[1]);
                  }
                } else {
                  this.$vux.toast.text(res.msg, "middle");
                }
              });

            } else {
              this.$vux.toast.text(res.msg, "middle");
            }
          });
        }
      },
      initWxLogin(userId, userCookie) {
        let base64 = require('js-base64').Base64;
        setSessionStore("proxy_identity", userCookie);
        setSessionStore("userMark", base64.encode(userId));
        setStore("withdraw_sign", base64.encode(userId));//验证不同用户登录后提现密码次数的问题

        if (userId != this.withdraw) { //不是当前用户清除十分钟次数和cookie的时间
          localStorage.removeItem("sess_time_local");
          Cookies.remove("sess_time_local", "", {
            expires: -1,
            path: ''
          })
        }
        this.$router.replace('/index');
      },
      protocolPage() {
        this.$router.push('/protocol');
      },
      inputBlur() {
        window.scrollTo(0, 0);
      }
    },
    components: {
      "timer-btn": code
    }
  }
</script>

<style lang="less" scoped>
  @import "../../assest/mixin";

  .wx-bind-phone {
    .wh(100%, 100%);
    background: @talent-theme-bg-color;
    .wx-phone {
      .wh(100%, auto);
      background: #FFF;
      .phone-box {
        margin-left: 0.32rem;
        display: flex;
        align-items: center;
        .wh(96.8%, 1.333rem);
        border-bottom: 0.027rem solid @talent-theme-bg-color;
        .title {
          .size-color(0.427rem, rgba(51, 51, 51, 1));
        }
        .phone-con {
          margin-left: 0.92rem;
          .phone-num {
            .size-color(0.427rem, rgba(204, 204, 204, 1))
          }
        }
        .phone-dist {
          margin-left: 0.493rem;
        }
      }

    }
    .verify-box {
      .wh(100%, auto);
      background: #FFF;
      .verify-con {
        display: flex;
        align-items: center;
        margin-left: 0.32rem;
        .wh(96.8%, 1.333rem);
        border-bottom: 0.027rem solid @talent-theme-bg-color;
        background: #FFF;
        .verify-title {
          .size-color(0.427rem, rgba(51, 51, 51, 1));
          padding-right: 0.92rem;
        }
        .code-con {
          display: flex;
          align-items: center;
          width: 7.147rem;
          justify-content: space-between;
          .code-box {
            display: flex;
            align-items: center;
            width: 60%;
            .code {
              .size-color(0.427rem, rgba(204, 204, 204, 1));
              width: 100%;
            }
          }
          .mobile {
            height: 0.8rem;
            line-height: 0.8rem;
            background: #FFF;
            .size-color(0.427rem, rgba(60, 175, 255, 1));
          }
        }
      }
    }
    .wx-tip {
      margin: 0.44rem 0.32rem 1.307rem 0.32rem;
      display: flex;
      justify-content: center;
      .size-color(0.373rem, rgba(60, 175, 255, 1));
      line-height: 0.44rem;
    }
    .sure-text {
      .fj(center, center);
      margin: 0 auto;
      .wh(9.04rem, 1.333rem);
      background: rgba(60, 175, 255, 1);
      border-radius: 0.107rem;
      .size-color(0.48rem, rgba(255, 255, 255, 1));
    }
    .protocol-box {
      .fj(center, center);
      padding-top: 0.36rem;
      padding-bottom: 0.4rem;
      .size-color(0.373rem, rgba(102, 102, 102, 1));
      .protocol {
        color: #3CAFFF;
      }
    }
  }
</style>
